<template>
      <div style="background-color: #f5f5f5; padding: 20px; ">   
        <div style="background-color: wheat; padding: 20px; ">
          <el-button type="primary" @click="dialogVisible = true">房价添加</el-button>
        <el-select v-model="paymentType.RoomName"  placeholder="请选择"  @change="TableShow()" clearable style="width: 100px; margin-left: 80%;">
        <el-option v-for="item in SelectText" :key="item.roomTypeId" :label="item.roomName" :value="item.roomName"/>
        </el-select>
        </div>
          <el-table :data="tableData"  style="margin-top: 10Px;">
          <el-table-column fixed prop="roomName" label="房型" width="150" />
          <el-table-column prop="productName" label="产品名称" width="150" />
          <el-table-column prop="breakfastNumber" label="早餐份数" width="150" />
          <el-table-column prop="salesStrategy" label="销售策略" width="150" />
          <el-table-column prop="payoutMethods" label="付款方式" width="150" />
          <el-table-column prop="standardPrice" label="标准价格" width="150" />
          <el-table-column prop="accommodationOffers" label="住宿优惠" width="150" />
          <el-table-column fixed="right" label="操作" width="150">
          <template #default="scope">
            <el-button link type="primary" @click="TableDelete(scope.row.id)" size="small">删除</el-button>
            <el-button link type="primary" @click="TableUpdate(scope.row)" size="small">修改</el-button>
            <el-button link type="primary" size="small">编辑</el-button>
          </template>
          </el-table-column>
        </el-table>
 
   </div>

   <el-dialog v-model="dialogVisible" title="Tips" width="30%" draggable>
    <span>

      <el-form
      ref="ruleFormRef"
    :model="ruleForm"
   
    label-width="120px"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
  >
  
  <el-form-item label="适用房型" prop="name">
    <el-select v-model="ruleForm.roomTypeId"  placeholder="请选择" >
        <el-option v-for="item in SelectText" :key="item.roomTypeId" :label="item.roomName" :value="item.id"/>
        </el-select>
    </el-form-item>
      
    <el-form-item label="标准价格" prop="name">
      <el-input v-model="ruleForm.productName" />
    </el-form-item>


    <el-form-item label="标准价格" prop="name">
      <el-input v-model="ruleForm.standardPrices" />
    </el-form-item>

    
    <el-form-item label="收款方式" prop="resource">
      <el-radio-group v-model="ruleForm.payoutMethodss">
        <el-radio label="预订付款" :value="1" />
        <el-radio label="到店付款" :value="2"/>
      </el-radio-group>
    </el-form-item>
    
    <el-form-item label="住宿优惠" prop="type">
      <el-checkbox-group v-model="ruleForm.accommodationOffersss">
        <el-checkbox label="可以使用优惠卷抵扣" name="type" />
        <el-checkbox label="可是使用现金卷抵扣" name="type" />
      </el-checkbox-group>
    </el-form-item>
    

    <el-form-item label="会员差价" prop="resource">
      <el-radio-group v-model="ruleForm.membershipSpread">
        <el-radio label="不设置" value="不设置" />
        <el-radio label="按折扣" value="按折扣"/>
        <el-radio label="按不同价格" value="按不同价格" />
      </el-radio-group>
    </el-form-item>
   
    
    <el-form-item label="早餐份数" prop="name">
      <el-input v-model="ruleForm.breakfastNumbers" />
    </el-form-item>

    <el-form-item label="房量数量" prop="name">
      <el-input v-model="ruleForm.numberRoomss" />
    </el-form-item>

    <div class="app-container">
    <h3>销售策略</h3>

    <table>
      <tr>
        <td>
          
        </td>
      </tr>
    </table>
    <el-radio-group v-model="ruleForm.salesStrategy">
      <el-radio label="无">无</el-radio>
      <br/>
      <el-radio :label=" '早定优惠,提前'+ earlyBirdDays + '天预订' ">
        早定优惠,提前
        <el-input v-model="earlyBirdDays" type="number" style="width: 80px;" />
        天预订
      </el-radio>
      <br/>
    
    
      <el-radio :label=" '限定优惠, 最低预订'+ limitedDiscountRooms + ' 间'">
        限定优惠, 最低预订
        <el-input v-model="limitedDiscountRooms" type="number" style="width: 80px;" />
        间
      </el-radio>
      <br/>
      <el-radio :label="'今夜甩卖,'+ startTimeDay + ' 至 '+ endTimeDay + '预订, 减'+lastMinuteDiscount+'元'">
        今夜甩卖,
        <el-date-picker
          v-model="startTimeDay"
          type="date"
          value-format="yyyy-MM-dd"
          :editable="false"
          style="width: 100px;"
        >
        </el-date-picker>
        <el-time-picker v-model="startTime" style="width: 100px;" />
        至
        <el-date-picker
          v-model="endTimeDay"
          type="date"
          value-format="yyyy-MM-dd"
          :editable="false"
          style="width: 100px;"
        >
        </el-date-picker>
        <el-time-picker v-model="endTime" style="width: 100px;" />
        预订, 减
        <el-input v-model="lastMinuteDiscount" type="number" style="width: 80px;" />
        元
      </el-radio>
    </el-radio-group>
  </div>
 
    
    
  </el-form>
    </span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">清除</el-button>
        <el-button type="primary" @click="submitForm()">
          添加
        </el-button>
      </span>
    </template>
  </el-dialog>

  <el-dialog v-model="dialogVisibles" title="Tips" width="30%" draggable>
    <span>

      <el-form
      ref="ruleFormRef"
    :model="ruleForm"
   
    label-width="120px"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
  >
  
  <el-form-item label="适用房型" prop="name">
    <el-select v-model="ruleForm.roomTypeId"  placeholder="请选择" >
        <el-option v-for="item in SelectText" :key="item.roomTypeId" :label="item.roomName" :value="item.id"/>
        </el-select>
    </el-form-item>
      
    <el-form-item label="标准价格" prop="name">
      <el-input v-model="ruleForm.productName" />
    </el-form-item>


    <el-form-item label="标准价格" prop="name">
      <el-input v-model="ruleForm.standardPrices" />
    </el-form-item>

    
    <el-form-item label="收款方式" prop="resource">
      <el-radio-group v-model="ruleForm.payoutMethodss">
        <el-radio label="预订付款" :value="1" />
        <el-radio label="到店付款" :value="2"/>
      </el-radio-group>
    </el-form-item>
    
    <el-form-item label="住宿优惠" prop="type">
      <el-checkbox-group v-model="ruleForm.accommodationOffersss">
        <el-checkbox label="可以使用优惠卷抵扣" name="type" />
        <el-checkbox label="可是使用现金卷抵扣" name="type" />
      </el-checkbox-group>
    </el-form-item>
    

    <el-form-item label="会员差价" prop="resource">
      <el-radio-group v-model="ruleForm.membershipSpread">
        <el-radio label="不设置" value="不设置" />
        <el-radio label="按折扣" value="按折扣"/>
        <el-radio label="按不同价格" value="按不同价格" />
      </el-radio-group>
    </el-form-item>
   
    
    <el-form-item label="早餐份数" prop="name">
      <el-input v-model="ruleForm.breakfastNumbers" />
    </el-form-item>

    <el-form-item label="房量数量" prop="name">
      <el-input v-model="ruleForm.numberRoomss" />
    </el-form-item>

    <div class="app-container">
    <h3>销售策略</h3>

    <table>
      <tr>
        <td>
          
        </td>
      </tr>
    </table>
    <el-radio-group v-model="ruleForm.salesStrategy">
      <el-radio label="无">无</el-radio>
      <br/>
      <el-radio :label=" '早定优惠,提前'+ earlyBirdDays + '天预订' ">
        早定优惠,提前
        <el-input v-model="earlyBirdDays" type="number" style="width: 80px;" />
        天预订
      </el-radio>
      <br/>
    
    
      <el-radio :label=" '限定优惠, 最低预订'+ limitedDiscountRooms + ' 间'">
        限定优惠, 最低预订
        <el-input v-model="limitedDiscountRooms" type="number" style="width: 80px;" />
        间
      </el-radio>
      <br/>
      <el-radio :label="'今夜甩卖,'+ startTimeDay + ' 至 '+ endTimeDay + '预订, 减'+lastMinuteDiscount+'元'">
        今夜甩卖,
        <el-date-picker
          v-model="startTimeDay"
          type="date"
          value-format="yyyy-MM-dd"
          :editable="false"
          style="width: 100px;"
        >
        </el-date-picker>
        <el-time-picker v-model="startTime" style="width: 100px;" />
        至
        <el-date-picker
          v-model="endTimeDay"
          type="date"
          value-format="yyyy-MM-dd"
          :editable="false"
          style="width: 100px;"
        >
        </el-date-picker>
        <el-time-picker v-model="endTime" style="width: 100px;" />
        预订, 减
        <el-input v-model="lastMinuteDiscount" type="number" style="width: 80px;" />
        元
      </el-radio>
    </el-radio-group>
  </div>
 
    
    
  </el-form>
    </span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">清除</el-button>
        <el-button type="primary" @click="UpdateTable()">
          修改
        </el-button>
      </span>
    </template>
  </el-dialog>

 
      
</template> 
<script setup lang="ts">  
import { ref, onMounted,reactive} from 'vue';
import axios from 'axios';
import { ElMessage,ElMessageBox} from 'element-plus'
import { debugWarn } from 'element-plus/es/utils/error.mjs';

onMounted(()=>{

  TextShow();
  TableShow();
})

const TableUpdate=((row:any)=>{
  ruleForm.id=row.id;
  ruleForm. roomTypeId=row.roomTypeId;
  ruleForm. productName=row.productName,
  ruleForm.standardPrices=row.standardPrice,
  ruleForm. payoutMethodss=row.payoutMethods,
  ruleForm. breakfastNumbers=row.breakfastNumber,
  ruleForm.numberRoomss=row.numberRooms,
  ruleForm.salesStrategy=row.salesStrategy,
  dialogVisibles.value=true;
})
const UpdateTable=()=>{
  ruleForm.accommodationOffers = ruleForm.accommodationOffersss.join(',')
   ruleForm.standardPrice =  Number(ruleForm.standardPrices),
   ruleForm.payoutMethods =  Number(ruleForm.payoutMethodss),
   ruleForm.breakfastNumber =  Number(ruleForm.breakfastNumbers),
   ruleForm.numberRooms =  Number(ruleForm.numberRoomss),
   debugWarn
  axios.put('https://localhost:44392/HousinUpdate', ruleForm).then((res)=>{
    console.log(ruleForm);
    if(res.data.code==200){
      ElMessage({
        message: '修改成功',
        type: 'success',
      })
      TableShow();
      dialogVisibles.value=false;
    }
  })
}
const dialogVisible = ref(false);
const dialogVisibles = ref(false);
/// 存储选中的销售策略
const selectedStrategy = ref('none');
// 早定优惠提前的天数
const earlyBirdDays = ref('');
// 限定优惠最低预订的房间数
const limitedDiscountRooms = ref('');
// 今夜甩卖开始日期
const startTimeDay = ref(new Date());
// 今夜甩卖开始时间
const startTime = ref();
// 今夜甩卖结束日期
const endTimeDay = ref(new Date());
// 今夜甩卖结束时间
const endTime = ref();
// 今夜甩卖的减免金额
const lastMinuteDiscount = ref('');

const SelectText:any = ref([])
//下拉框的绑定
const TextShow =(()=>{

  axios.get('https://localhost:44392/api/app/orderservices/text').then((res)=>{
    SelectText.value = res.data.data
  })
})
const tableData:any = ref([])
const paymentType:any = reactive([
  {
    RoomName:"",
  }
])
//表格的绑定
const TableShow =(()=>{

  axios.get('https://localhost:44392/api/app/housing-show/housin-show',{
    params: {
      RoomName: paymentType.RoomName,
    },
  }).then((res)=>{
    tableData.value.standardPrices = res.data.data.standardPrice
    tableData.value = res.data.data
   
  })
})
const TableDelete = (id:any)=>{

  ElMessageBox.confirm(
    '你确定要删除吗?',
    'Warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: 'Cancel',
      type: 'warning',
    }
  )
    .then(() => {
      axios.get("https://localhost:44392/api/app/housing-show/housin-delect/"+id,
   ).then((res)=>{
    if(res.data.code == 200)
    {
      ElMessage.success({
        message: '删除成功',
        type: 'success',
      })
      TableShow()
    }
    else 
    {
      ElMessage.error({
        message: '删除失败',
        type: 'error',
      })
    }
   })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled',
      })
    })

  
}
const formSize = ref('default')
const ruleForm =reactive ({
  id : '',
  roomTypeId:'',
  productName:'',
  standardPrice: 0,
  standardPrices:'',
  payoutMethods: 0,
  payoutMethodss: '',
  accommodationOffers:'',
  accommodationOffersss:[],
  membershipSpread:'',
  breakfastNumber: 0,
  breakfastNumbers: '',
  numberRooms: 0,
  numberRoomss: '',
  salesStrategy:'',
})
const submitForm=()=>{
   ruleForm.accommodationOffers = ruleForm.accommodationOffersss.join(',')
   ruleForm.standardPrice =  Number(ruleForm.standardPrices),
   ruleForm.payoutMethods =  Number(ruleForm.payoutMethodss),
   ruleForm.breakfastNumber =  Number(ruleForm.breakfastNumbers),
   ruleForm.numberRooms =  Number(ruleForm.numberRoomss),
  axios.post('https://localhost:44392/api/app/housing-add/rate-plans-add',ruleForm).then((res)=>{
    if(res.data.code == 200)
    {
      ElMessage.success({
        message: '添加成功',
        type: 'success',
      })
      TableShow();
    }
    else 
    {
      ElMessage.error({
        message: '添加失败',
        type: 'error',
      })
      
    }
    
  })

  
}
</script>
<style scoped>
.hotel-order {
  padding: 20px;
}
.filter-container {
  margin-bottom: 20px;
}

.hotel-order {
  padding: 20px;
}
.filter-container {
  margin-bottom: 20px;
}
</style>




